from dash import html,dcc
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
from dash import Dash, html, Input, Output, callback
from .playBar import biliplayfig,bililikefig,doubanReviewNumfig,BiliWordfig,doubanWordfig,xiaohongshuplayfig,xinVfigs,namemap,agepie,genderpie,areamap
from .cons import datacons
from .. import navi
def dataPannel():
    return html.Div([
        navi.navigator(),
        html.Div([
        html.H2('数据面板', className='data',id='dataDisplay'),
        html.Div([
            html.H3('平台选择', className='platform',style={'margin':'20px'}),
            dcc.RadioItems(options=['总览','豆瓣', '哔哩哔哩','微信视频号','小红书'],value='总览',inline=True,style={'margin':'20px','justify-content':'space-around'},id='platformSelect',labelStyle={'display': 'inline-block','margin':'0px 10px','font-size':'15px','font-weight':'bold','color':'#000','border':'#000'}),
        ],className='dataSelect',style={'margin':'20px','display':'flex','flex-grow': 1}),
        html.Div(id='datacontent'),
    ],className='datapannel',style={'margin':'10px'})
    ],style={'margin':'20px'})

@callback(
    Output("datacontent", "children"),
    [Input("platformSelect", "value")],
    suppress_callback_exceptions=True,
)
def display_page(platform):
    if platform == '总览':
        return TotalPannel()
    elif platform == '豆瓣':
        return doubanDisplay()
    elif platform == '哔哩哔哩':
        return biliDisplay()
    elif platform == '小红书':
        return xiaoHongShuDisplay()
    elif platform == '微信视频号':
        return VDdisplay()
def VDdisplay():
    return html.Div([
        html.H3('微信视频号分析', className='Title'),
        html.Div(
            [  html.Div([
                html.H4('微信视频号每日点赞量', className='Movie'),
                dcc.Graph(figure=xinVfigs['totalLike'],style={'width':'100%'}),
            ], className='col-1',style={'margin':'20px'}),
            html.Div([
                html.H4('微信视频号每日评论量', className='Movie'),
                dcc.Graph(figure=xinVfigs['totalComment'],style={'width':'100%'}),
            ], className='col-1',style={'margin':'20px'}),
            html.Div([
                html.H4('微信视频号每日转发量', className='Movie'),
                dcc.Graph(figure=xinVfigs['totalForward'],style={'width':'100%'}),
            ], className='col-1',style={'margin':'20px'}),
            html.Div([
                html.H4('微信视频号每日视频数', className='Movie'),
                dcc.Graph(figure=xinVfigs['videoCount'],style={'width':'100%'}),
            ], className='col-1',style={'margin':'20px'}),
            ], className='row'),
    ], className='LinePlot',style={'margin':'10px'})         

def douyinDisplay():
    return html.Div([
        html.H3('抖音分析', className='Title'),
        html.Div([
            html.Div([
                html.H4('抖音每日播放量', className='Movie'),
                dcc.Graph(figure=doubanReviewNumfig,style={'width':'50%'}),
            ], className='col-1',style={'margin':'20px'}),
            html.Div([
                html.H4('抖音视频词云图', className='Words'),
                dcc.Graph(figure=doubanWordfig,style={'width':'100%'}),
            ], className='col-1',style={'margin':'20px','width':'600px'}),
        ], className='row'),
    ], className='LinePlot',style={'margin':'10px'})
def xiaoHongShuDisplay():
    return html.Div([
        html.H3('小红书分析', className='Title'),
        html.Div([
                html.H4('小红书每日点赞量', className='Movie'),
                dcc.Graph(figure=xiaohongshuplayfig,style={'width':'100%'}),
        ],style={'margin':'20px'})
    ],
    className='LinePlot',style={'margin':'10px'})

def doubanDisplay():
    return html.Div([
        html.H3('豆瓣分析', className='Title'),
        html.Div([
            html.Div([
                html.H4('豆瓣每日评论量', className='Movie'),
                dcc.Graph(figure=doubanReviewNumfig,style={'width':'100%'}),
            ], className='col-1',style={'margin':'0px'}),
            html.Div([
                html.H4('豆瓣评论词云图', className='Words'),
                dcc.Graph(figure=doubanWordfig),
            ], className='col-1',style={'margin':'0px'}),
        ], className='row'),
    ], className='LinePlot',style={'margin':'10px'})

def biliDisplay():
    return html.Div([
        html.H3('B站分析', className='Title'),
        html.Div([
            html.Div([
                html.H4('B站二创视频数据', className='Movie'),
                dcc.Graph(figure=biliplayfig,style={'width':'100%'}),
                dcc.Graph(figure=bililikefig,style={'width':'100%'})
            ], className='col-2',style={'margin':'0px'}),
            html.Div([
                html.H4('B站二创视频词云图', className='Movie'),
                dcc.Graph(figure=BiliWordfig),
            ], className='col-2',style={'margin':'0px'}),
        ], className='row'),
    ], className='LinePlot',style={'margin':'10px'})


def TotalPannel():
    return html.Div([
        html.Hr(),
        html.H3('数据总览', className='data',id='dataDisplay',style={'margin':'20px','align-items':'left','display':'flex','justify-content':'center'}),
        html.Div([
            html.H4('累计流量', className='Title'),
            dbc.Row([
                dbc.Col([
                    html.Div([
                        html.Img(src='',style={'width':'60px','height':'60px'}),
                        html.Span('乐视视频',style={'font-size':'20px','margin':'20px 10px'}),
                    ],className='row-le',style={'display':'flex','flex-grow': 1}),
                    html.Div([
                        html.Span(f'{datacons.lePlay}',style={'font-size':'30px','font-weight':'bold'}),
                        html.Span(f'人次观看'),
                    ], className='text'),
                ], className='col',style={'margin':'20px','display':'flex','align-items':'center','flex-direction':'column'}),
                dbc.Col([
                    html.Div([
                        html.Img(src='',style={'width':'60px','height':'60px'}),
                        html.Span('爱奇艺',style={'font-size':'20px','margin':'20px 10px'}),
                    ],className='row-le',style={'display':'flex','flex-grow': 1}),
                    html.Div([
                        html.Span(f'{datacons.aiqiyilike}',style={'font-size':'30px','font-weight':'bold'}),
                        html.Span(f'人喜欢'),
                    ], className='text'),
                ], className='col',style={'margin':'20px','display':'flex','align-items':'center','flex-direction':'column'}),
                dbc.Col([
                    html.Div([
                        html.Img(src='',style={'width':'60px','height':'60px'}),
                        html.Span('豆瓣',style={'font-size':'20px','margin':'20px 10px'}),
                    ],className='row-le',style={'display':'flex','flex-grow': 1}),
                    html.Div([
                        html.Span(f'{datacons.doubanshortcomment}',style={'font-size':'30px','font-weight':'bold'}),
                        html.Span(f'人评论'),
                    ], className='text'),
                ], className='col',style={'margin':'20px','display':'flex','align-items':'center','flex-direction':'column'}),
                dbc.Col([
                    html.Div([
                        html.Img(src='',style={'width':'60px','height':'60px'}),
                        html.Span('百度贴吧',style={'font-size':'20px','margin':'20px 10px'}),
                    ],className='row-le',style={'display':'flex','flex-grow': 1}),
                    html.Div([
                        html.Span(f'{datacons.baidubaGuanzhu}',style={'font-size':'30px','font-weight':'bold'}),
                        html.Span(f'人关注'),
                    ], className='text'),
                ], className='col',style={'margin':'20px','display':'flex','align-items':'center','flex-direction':'column'}),
            ],className='row',style={'display':'flex','flex-grow': 1,'justify-content':'space-around','margin':'20px'}),
        ], className='row'),

        html.Div([
            html.H4('近期流量', className='Title'),
            dbc.Row([
                dbc.Col([
                    html.Div([
                        html.Img(src='',style={'width':'60px','height':'60px'}),
                        html.Span('微信视频号',style={'font-size':'20px','margin':'20px 10px'}),
                    ],className='row-le',style={'display':'flex','flex-grow': 1}),
                    html.Div([
                        html.Span(f'每日'),
                        html.Span(f'{datacons.weixinvideoday }',style={'font-size':'30px','font-weight':'bold'}),
                        html.Span(f'人次推荐'),
                    ], className='text'),
                ], className='col',style={'margin':'20px','display':'flex','align-items':'center','flex-direction':'column'}),
                dbc.Col([
                    html.Div([
                        html.Img(src='',style={'width':'60px','height':'60px'}),
                        html.Span('抖音',style={'font-size':'20px','margin':'20px 10px'}),
                    ],className='row-le',style={'display':'flex','flex-grow': 1}),
                    html.Div([
                        html.Span(f'每日'),
                        html.Span(f'{datacons.douyinPlayday }',style={'font-size':'30px','font-weight':'bold'}),
                        html.Span(f'人次观看'),
                    ], className='text'),
                ], className='col',style={'margin':'20px','display':'flex','align-items':'center','flex-direction':'column'}),
                dbc.Col([
                    html.Div([
                        html.Img(src='',style={'width':'60px','height':'60px'}),
                        html.Span('小红书',style={'font-size':'20px','margin':'20px 10px'}),
                    ],className='row-le',style={'display':'flex','flex-grow': 1}),
                    html.Div([
                        html.Span(f'每日'),
                        html.Span(f'{datacons.xiaohongshuday }',style={'font-size':'30px','font-weight':'bold'}),
                        html.Span(f'人次点赞'),
                    ], className='text'),
                ], className='col',style={'margin':'20px','display':'flex','align-items':'center','flex-direction':'column'}),
                dbc.Col([
                    html.Div([
                        html.Img(src='',style={'width':'60px','height':'60px'}),
                        html.Span('哔哩哔哩',style={'font-size':'20px','margin':'20px 10px'}),
                    ],className='row-le',style={'display':'flex','flex-grow': 1}),
                    html.Div([
                        html.Span(f'每日'),
                        html.Span(f'{datacons.biliPlayday}',style={'font-size':'30px','font-weight':'bold'}),
                        html.Span('人次播放'),
                    ], className='text'),
                ], className='col',style={'margin':'20px','display':'flex','align-items':'center','flex-direction':'column'}),
                dbc.Col([
                    html.Div([
                        html.Img(src='',style={'width':'60px','height':'60px'}),
                        html.Span('豆瓣',style={'font-size':'20px','margin':'20px 10px'}),
                    ],className='row-le',style={'display':'flex','flex-grow': 1}),
                    html.Div([
                        html.Span(f'每日新增'),
                        html.Span(f'{datacons.doubandayComment}',style={'font-size':'30px','font-weight':'bold'}),
                        html.Span(f'条评论'),
                    ], className='text'),
                ], className='col',style={'margin':'20px','display':'flex','align-items':'center','flex-direction':'column'}),
                dbc.Col([
                    html.Div([
                        html.Img(src='',style={'width':'60px','height':'60px'}),
                        html.Span('百度',style={'font-size':'20px','margin':'20px 10px'}),
                    ],className='row-le',style={'display':'flex','flex-grow': 1}),
                    html.Div([
                        html.Span(f'每日'),
                        html.Span(f'{datacons.baiduSearchIndex}',style={'font-size':'30px','font-weight':'bold'}),
                        html.Span(f'人次搜索'),
                    ], className='text'),
                ], className='col',style={'margin':'20px','display':'flex','align-items':'center','flex-direction':'column'}),
            ],className='row',style={'display':'flex','flex-grow': 1,'justify-content':'space-around','margin':'20px'}),
        ], className='row'),
        html.Div([
            html.H4('人群分布', className='Title'),
            dbc.Row([
                dbc.Col([html.H5('性别', className='Title'),
                        dcc.Graph(figure=genderpie),
                    ],className='row-le',style={'display':'flex','flex-direction':'column'}),
                dbc.Col([html.H5('年龄', className='Title'),
                        dcc.Graph(figure=agepie),
                    ],className='row-le',style={'display':'flex','flex-direction':'column'})
            ],className='row',style={'display':'flex','flex-grow': 1,'justify-content':'space-around','margin':'20px'}),
            dbc.Row([
                dbc.Col([html.H5('地域', className='Title'),
                        dcc.Graph(figure=areamap),
                    ],className='row-le',style={'display':'flex','flex-direction':'column'}),
            ],className='row',style={'display':'flex','flex-grow': 1,'justify-content':'space-around','margin':'20px'}),
        ], className='row'),
    ],style={'margin':'10px','width':'100%','display':'flex','flex-direction':'column','align-items':'left','justify-content':'center'})


def SearchIndex():
    pass

